<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/9/10
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>登录</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>

    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <link rel="icon" type="image/x-icon" href="images/logo/logo.png">

    <link rel="stylesheet" type="text/css" href="http://www.huangwx.cn/css/sweetalert.css">
    <script type="text/javascript" src="http://www.huangwx.cn/js/sweetalert-dev.js"></script>
    <!--    背景轮换图片-->
    <link rel="stylesheet" href="css/style.css">

<%--    验证码--%>
    <style>
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
        #embed-captcha {
            width: 500px;
            margin: 0 auto;
        }
    </style>
    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
    <script src="js/gt.js"></script>
</head>

<body>
<div class="limiter">
    <div class="container-login100" style="background-size: 100%;background-repeat: no-repeat">
        <div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
            <form action="login.do" method="post" class="login100-form validate-form">
                <span class="login100-form-title p-b-49">登录</span>

                <div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
                    <span class="label-input100">用户名</span>
                    <input class="input100" type="text" name="username" placeholder="请输入用户名" autocomplete="off">
                    <span class="focus-input100" data-symbol="&#xf206;"></span>
                </div>

                <div class="wrap-input100 validate-input" data-validate="请输入密码">
                    <span class="label-input100">密码</span>
                    <input class="input100" type="password" name="password" placeholder="请输入密码">
                    <span class="focus-input100" data-symbol="&#xf190;"></span>
                </div>

<%--                验证码及错误信息--%>
                <div class="form-group col-md-offset-9" style="width: 300px;margin:23px auto;font-size: 16px;color: red">
                    <div id="embed-captcha" style="margin-bottom: 10px"></div>
                    <p id="wait" class="show">正在加载验证码......</p>
                    <p id="notice" class="hide" style="font-size: 16px;color: red;">请先拖动验证码到相应位置</p>
                    <span class="errorMassage" style="">
                        <%=session.getAttribute("hint")==null?"":session.getAttribute("hint")%>
                    </span>
                </div>

                <div class="container-login100-form-btn">
                    <div class="wrap-login100-form-btn">
                        <div class="login100-form-bgbtn"></div>
                        <button id="embed-submit" type="submit" class="login100-form-btn btn_login">登 录</button>
                    </div>
                </div>

                <div class="txt1 text-center p-t-54 p-b-20">
                    <span>第三方登录</span>
                </div>

                <div class="flex-c-m">
                    <a href="#" class="login100-social-item bg1">
                        <i class="fa fa-wechat"></i>
                    </a>
                    <a href="#" class="login100-social-item bg2">
                        <i class="fa fa-qq"></i>
                    </a>
                    <a href="#" class="login100-social-item bg3">
                        <i class="fa fa-weibo"></i>
                    </a>
                </div>

                <div class="flex-col-c p-t-25">
                    <a href="register.jsp" class="txt2 turn_register">立即注册</a>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script src="js/main.js"></script>
<script src="js/login.js"></script>
<script>
    var handlerEmbed = function (captchaObj) {
        $("#embed-submit").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                e.preventDefault();
            }
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        // 获取id，challenge，success（是否启用failback）
        url: "pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerEmbed);
        }
    });
</script>
</html>
